<template>
  <div>
    <div class="line">

      <div class="content" style="text-align: center">

        <div style="clear:both;">
          <div :id="machine1" class="slotMachine">
            <div class="slot slot1"></div>
            <div class="slot slot2"></div>
            <div class="slot slot3"></div>
            <div class="slot slot4"></div>
            <div class="slot slot5"></div>
            <div class="slot slot6"></div>
          </div>

          <div :id="machine2" class="slotMachine" style="margin-left: 5px">
            <div class="slot slot1"></div>
            <div class="slot slot2"></div>
            <div class="slot slot3"></div>
            <div class="slot slot4"></div>
            <div class="slot slot5"></div>
            <div class="slot slot6"></div>
          </div>

          <div :id="machine3" class="slotMachine" style="margin-left: 5px">
            <div class="slot slot1"></div>
            <div class="slot slot2"></div>
            <div class="slot slot3"></div>
            <div class="slot slot4"></div>
            <div class="slot slot5"></div>
            <div class="slot slot6"></div>
          </div>
        </div>
        <div style="text-align: center; margin-top: 10px">
          <div style="font-size: 30px; line-height: 30px; color: #CD7F32">
            {{ htmlNameGold }}<i class="iconfont icon-gold" style="font-size: 30px"></i> <b>{{balance}}</b>
            &nbsp;&nbsp;
            <el-button type="text" style="color: #409EFF" @click="$refs.refTigerAddBalance.show()">{{ htmlNameBtnAdd }}</el-button>
          </div>
          <div style="margin-top: 18px">
            {{ htmlNameBet }}<el-input-number v-model="takeBalance" :min="1" :precision="0"  :disabled="doing" style="width: 120px" controls-position="right">
            <template #decrease-icon>
              <el-icon>
                <Minus />
              </el-icon>
            </template>
            <template #increase-icon>
              <el-icon>
                <Plus />
              </el-icon>
            </template>
          </el-input-number>
            &nbsp;&nbsp;
            <el-button type="text" circle @click="start" :disabled="doing" :title="htmlNameStart">
              <el-icon :style="`color: ${doing ? '#E6A23C' : '#409EFF'}; font-size: 36px`">
                <VideoPlay v-if="!doing" />
                <More v-if="doing" />
              </el-icon>
            </el-button>
          </div>
          <div :style="`margin-top: 11px; font-size: 14px; color: ${lucky ? '#67C23A': '#909399'}`">
            {{message}}
          </div>
        </div>

      </div>
    </div>
    <TigerAddBalance ref="refTigerAddBalance" @confirm="addBalance" />
    <div id="tiger-img"></div>
  </div>
</template>

<script>
import { VideoPlay, More, Minus, Plus } from '@element-plus/icons-vue'
import {LocalStore} from "@/driver/LocalStore"
import TigerAddBalance from "@/components/game/TigerAddBalance.vue"
export default {
  name: 'Tiger',
  components: { VideoPlay, More, Minus, Plus, TigerAddBalance },
  data() {
    return {
      doing: false,
      result: [-1, -1, -1],
      machine1: 'machine1',
      machine2: 'machine2',
      machine3: 'machine3',
      balance: 0,
      takeBalance: 10,
      message: '',
      lucky: false,

      htmlNameGold: chrome.i18n.getMessage('tigerContentGold'),
      htmlNameBtnAdd: chrome.i18n.getMessage('commonBtnAdd'),
      htmlNameBet: chrome.i18n.getMessage('tigerContentBet'),
      htmlNameStart: chrome.i18n.getMessage('commonBtnStart')
    }
  },
  methods: {
    /**
     * 开始.
     */
    start() {
      this.message = ''
      this.lucky = false
      if (this.balance < this.takeBalance) {
        this.message = chrome.i18n.getMessage('tigerContentAlertGoldNotEnough')
        return
      }
      this.balance -= this.takeBalance
      LocalStore.save('tiger.balance', this.balance)
      this.result = [-1, -1, -1]
      this.doing = true
      machine1.shuffle(3, onComplete);

      setTimeout(() => {
        machine2.shuffle(3, onComplete)
      }, 500)

      setTimeout(function(){
        machine3.shuffle(3, onComplete);
      }, 1000);
    },
    /**
     * 检查结果.
     * @returns {boolean}
     */
    checkResult() {
      const result = this.result
      if (result[0] > -1 && result[1] > -1 && result[2] > -1) {
        this.doing = false
        //todo: 处理
        console.log('result：', result)
        if (result[0] === result[1] && result[1] === result[2]) {
          let getBalance = this.takeBalance
          switch (result[0]) {
            case 0:
              getBalance *= 20
              break
            case 1:
              getBalance *= 5
              break;
            case 2:
              getBalance *= 30
              break
            case 3:
              getBalance *= 10
              break
            case 4:
              getBalance *= 50
              break
            case 5:
              getBalance *= 40
              break
          }
          this.balance += getBalance
          LocalStore.save('tiger.balance', this.balance)
          this.lucky = true
          this.message = chrome.i18n.getMessage('tigerContentAlertWin').formats(getBalance)
        } else {
          this.message = chrome.i18n.getMessage('tigerContentAlertNotWin')
        }
      }
      return false
    },
    /**
     * 绑定动画效果.
     */
    bind() {
      window.LoadTiger('#tiger-img')

      window.machine1 = $(`#${this.machine1}`).slotMachine({
        active	: 0,
        delay	: 500
      });

      window.machine2 = $(`#${this.machine2}`).slotMachine({
        active	: 1,
        delay	: 500
      });

      window.machine3 = $(`#${this.machine3}`).slotMachine({
        active	: 2,
        delay	: 500
      });

      window.onComplete = ($el, active) => {
        switch($el[0].id){
          case this.machine1:
            //$("#machine1Result").text("Index: "+active.index);
            this.result[0] = active.index
            break
          case this.machine2:
            //$("#machine2Result").text("Index: "+active.index);
            this.result[1] = active.index
            break
          case this.machine3:
            //$("#machine3Result").text("Index: "+active.index);
            this.result[2] = active.index
            break
        }
        this.checkResult()
      }
    },
    /**
     * 生成随机字符.
     * @returns {number}
     */
    generateRandomChar() {
      return  Math.floor(Math.random() * (122 - 65 + 1)) + 65;
    },
    /**
     * 加载余额.
     */
    loadBalance() {
      LocalStore.get('tiger.balance', (balance) => {
        this.balance = parseInt(balance) || 0
      })
    },
    /**
     * 添加余额.
     * @param data
     */
    addBalance(data) {
      const balance = this.balance + parseInt(data)
      LocalStore.save('tiger.balance', balance)
      this.balance = balance
    }
  },
  mounted() {
    this.machine1 = `1-${this.generateRandomChar()}`
    this.machine2 = `2-${this.generateRandomChar()}`
    this.machine3 = `3-${this.generateRandomChar()}`
    setTimeout(() => {
      this.bind()
    }, 500)
    this.loadBalance()
  }
}
</script>

<style scoped>
#textMachine, #textMachine2{
  width:520px;
  height: 67px;
  overflow: hidden;
  display: inline-block;
  text-align: center;
}
#textMachine > *, #textMachine2 > *{
  padding: 0px 0px;
}

.slotMachineButton{
  width:100px;
  height: 100px;
  overflow: hidden;
  display: inline-block;
  text-align: center;
}
.slotMachineButton {
  -moz-box-shadow:inset 0px 1px 0px 0px #fce2c1;
  -webkit-box-shadow:inset 0px 1px 0px 0px #fce2c1;
  box-shadow:inset 0px 1px 0px 0px #fce2c1;
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25) );
  background:-moz-linear-gradient( center top, #ffc477 5%, #fb9e25 100% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25');
  background-color:#ffc477;
  border-radius: 75px;
  text-indent:0px;
  border:6px solid #eeb44f;
  display:inline-block;
  color:#ffffff;
  font-size:50px;
  font-weight:bold;
  font-style:normal;
  height:100px;
  line-height:100px;
  width:100px;
  text-decoration:none;
  text-align:center;
  text-shadow:1px 1px 0px #cc9f52;
  margin-left: 50px;
  cursor:pointer;
}
.slotMachineButton:hover {
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477) );
  background:-moz-linear-gradient( center top, #fb9e25 5%, #ffc477 100% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477');
  background-color:#fb9e25;
}.slotMachineButton:active {
   position:relative;
   top:1px;
 }



.slotMachine{
  width:100px;
  height: 100px;
  overflow: hidden;
  display: inline-block;
  text-align: center;
  border: 5px solid #000;
  background-color: #ffffff;
}
.noBorder{
  border:none !important;
  background: transparent !important;
}
.slotMachine .slot{
  width:100px;
  height:100px;
}
.slot1{
  background-image: url("@/static/images/games/tiger/slot1.png");
}
.slot2{
  background-image: url("@/static/images/games/tiger/slot2.png");
}
.slot3{
  background-image: url("@/static/images/games/tiger/slot3.png");
}
.slot4{
  background-image: url("@/static/images/games/tiger/slot4.png");
}
.slot5{
  background-image: url("@/static/images/games/tiger/slot5.png");
}
.slot6{
  background-image: url("@/static/images/games/tiger/slot6.png");
}
</style>